var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function draw(){
    context.fillStyle = '#ffffff';
    context.fillRect(0, 0, 500, 500);
    context.strokeStyle = '#000000';
    context.strokeRect(0, 0, 500, 500);

    drawGear(origin1);
}

function drawGear(origin){

    context.strokeStyle = '#000000';
    context.fillStyle = '#000000';
    context.arc(origin.x, origin.y, 5, 0, Math.PI * 180);
    context.fill();
    context.beginPath();
    context.arc(origin.x, origin.y, 20, 0, Math.PI * 180, false);
    context.arc(origin.x, origin.y, 30, 0, Math.PI * 180, true);
    context.fill();
    context.closePath();

    context.beginPath();
    context.arc(origin.x, origin.y, 40, 0, Math.PI * 180, false);
    context.arc(origin.x, origin.y, 55, 0, Math.PI * 180, true);
    context.fill();
    context.closePath();

    // 画齿轮，比如有20个齿。
    var radian = 360 / 20 * 2 * Math.PI / 360;
    for (var i = 0; i < 20; i += 2) {
        context.beginPath();
        context.fillStyle = 'red';
        context.arc(origin.x, origin.y, 55, radian * i, radian * (i+1));
        context.arc(origin.x, origin.y, 70, radian * (i+1), radian * i, true);

        context.fill();
        context.closePath();
    }
}

var origin1 = {
    x: 250, y: 250,
};

draw();